<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>电气监控</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="electrical-monitor">
      <div>
        <el-form :model="search" label-width="80px" :inline="true">
          <el-form-item label="部门-车间">
            <el-cascader filterable :options="deps" v-model="search.depWork" :props="{children:'workshops'}" separator="-" @change="searchData"></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <electrical-monitor-table class="electrical-monitor-content" :class="{'hasData':pagination.totalCount!==0}" ref="eleMonitorTable"
        :machine-data="machineData" :has-scroll="true">
        <template slot="dialogComp" slot-scope="scope">
          <change-order-form :machine="scope.changeMachine" @change-order="changeOrderSuccess" @change-order-error="changeOrderError"></change-order-form>
        </template>
      </electrical-monitor-table>
      <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:10px;">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "../base.css",
    "./css/orderSelect.css",
    "./css/changeOrderForm.css"
  ]);
</script>
<script src="../utils/moduleUtil.js"></script>
<script src="../components/electricalMonitorTable.js"></script>
<script src="./orderSelect.js"></script>
<script src="./changeOrderForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        SysUtil: SysUtil,
        machineData: [],
        search: {
          depWork: ['']
        },
        deps: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        timeout: null
      };
    },
    created: function () {
      this.getDepartment();
      this.setMachineData(true);
    },
    destroyed: function () {
      var timeout = this.timeout;
      if (timeout !== null) {
        window.clearTimeout(timeout);
      }
    },
    methods: {
      getDepartment: function () {
        var self = this;
        this.loading = true;
        return new Promise(function (resole, reject) {
          ModuleUtil.getDepAndWorkShop(true).then(function (deps) {
            self.loading = false;
            self.deps = deps;
            resole(deps);
          });
        });
      },

      setMachineData: function (hasLoading) {
        var pagination = this.pagination;
        var search = this.search;
        var depWork = search.depWork;

        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize
        };

        if (depWork[0] !== undefined || depWork[0] !== '') {
          postData.departmentId = depWork[0];
        }

        if (depWork[1] !== undefined || depWork[1] !== '') {
          postData.workShopId = depWork[1];
        }
        if (hasLoading) {
          this.loading = true;
        }

        var timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
        }
        var self = this;
        ajaxRequest('equipment/getEcsMonitor', postData).then(function (res) {
          if (hasLoading) {
            self.loading = false;
          }
          var machineData = res.returnData;
          for (var i = 0; i < machineData.length; i++) {
            var machine = machineData[i];
            var useElectric = machine.useElectric;
            if (useElectric !== null) {
              useElectric *= 1000;
            }
            machine.useElectric = SysUtil.decimalNumber(useElectric);
            var useGas = machine.useGas;
            machine.useGas = SysUtil.decimalNumber(useGas);

            var thisYield = machine.thisYield;
            machine.avgElectric = SysUtil.getAvgData(useElectric, thisYield, 4);
            machine.avgGas = SysUtil.getAvgData(useGas, thisYield, 4);
          }
          self.machineData = machineData;
          self.pagination.totalCount = res.iTotalRecords;
          timeout = setTimeout(function () {
            self.setMachineData();
          }, 5000);
          self.timeout = timeout;
        }).catch(function () {
          if (hasLoading) {
            self.loading = false;
          }
        });
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMachineData(true);
      },

      pageChange: function () {
        this.setMachineData(true);
      },

      changeOrderSuccess: function () {
        this.$refs.eleMonitorTable.closeOrderDialog();
        this.setMachineData(true);
      },

      changeOrderError: function () {
        this.$refs.eleMonitorTable.closeOrderDialog();
        this.setMachineData(true);
      },
    },
    components: {
      ElectricalMonitorTable: ElectricalMonitorTable,
      ChangeOrderForm: ChangeOrderForm
    }
  });
</script>
<style>
  .electrical-monitor {
    padding: 20px;
    height: calc(100% - 40px);
  }

  .electrical-monitor .electrical-monitor-content {
    height: calc(100% - 62px);
    overflow: auto;
  }

  .electrical-monitor .electrical-monitor-content.hasData {
    height: calc(100% - 104px);
  }
</style>

</html>